import BasicLayout from "@/components/BasicLayout";
import ShopCard from "@/components/ShopCard";
import useQuery from "@/hooks/useQuery";
import { CommentEntity, CommentFields } from "@/types/CommentEntity";
import { ShopFields } from "@/types/ShopEntity";
import { Rate } from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import gql from "graphql-tag";
import { useMemo } from "react";


const GetSelfCommentQuery = gql`
    query GetSelfComment{
        getSelfComment{
            ${CommentFields}
            shop{
                ${ShopFields}
            }
        }
    }
`
export default function Index() {
    const { data } = useQuery(GetSelfCommentQuery)
    const comments: CommentEntity[] = useMemo(() => data?.getSelfComment || [], [data]);

    return (
        <BasicLayout>
            {comments.map(item => (
                <View key={item.id}>
                    <ShopCard
                        {...item.shop}
                    />
                    <View className="text-gray-700 text-[28rpx] mb-5 ml-3 mr-3 bg-wight">
                        <View>
                            {item.context}
                        </View>
                        <View>
                            <Rate value={item.rate} />
                        </View>
                    </View>
                </View>
            ))}
        </BasicLayout>
    )
}